<template>
	<div class="step3">
		<header>
			<em class="back" @click="back"></em>
			<span>房间{{curroom}}</span>
		</header>
		<section class="users">
			<p>房间成员：</p>
			<ul>
				<li v-for="(item,index) in users" :class='{cur:index==curindex}'>{{item}}</li>

			</ul>
		</section>
		<section class="setopts" v-if="isLeader && !isdone">
			<p>添加项目<i>(最多10项)</i></p>
			<ul>
				<li v-for="item in prjs">
					<label for="opt1">Num{{item.num}}:</label>
					<input :ref='item.ref' id="opt1" v-model="item.val" maxlength="5" type="text" placeholder="请输入。。。" />
				</li>
			</ul>
			<div class="btnarea">
				<a href="javascript:;" class="btnadd" @click='addprj'>添加</a>
				<a href="javascript:;" class="btndone" @click='done'>完成</a>
			</div>
		</section>
		<section class="loading" v-if="!isLeader && !isdone">
			<p>房主正在绘制转盘，请等待。。。</p>
		</section>
		<transition name='zoom' enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
			<section class="zhuanpan" v-if='isdone'>
			<div class="needle" :class={an_rt:anim} @click="start" ref='needle'>
				<em></em> 点我
				<br/>开始
			</div>
			<canvas ref="ctx" class="ctx" width="100%" height="100%"></canvas>
			<div class="txt">
				<p v-for="item in txts" :style="item.deg">{{item.txt}}</p>
			</div>
		</section>
		</transition>
		<section class="resultlist" v-if='records.length'>
			<ul>
				<li v-for='item in records'>{{item}}</li>
			</ul>
		</section>
		<div class="alert" v-if='showresult'>
			<p class="msg">恭喜<span>{{msg.user}}</span>喜获<span>{{msg.obj}}</span></p>
			<button @click="ok">确定</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				curroom: '',
				isLeader:this.$store.state.isLeader,
//				isLeader: true,
				isdone: false, //房主是否完成添加选项
				users: this.$store.state.users,
				num: 1,
				prjs: [{
					num: 1,
					ref: 'ref1',
					val: ''
				}],
				txts: [], //  转盘抽奖文字
				anim:false,//抽奖动态开始
				showresult:false,//显示抽奖结果
				msg:{
					user:'',
					obj:''
				},
				records:[],//抽奖记录
				curindex:999,
				sid:null,//定时器
			}
		},
		methods: {
			back(){
				this.$router.back();
			},
			addprj() {
				if(this.num < 10) {
					this.num++;
					this.prjs.push({
						num: this.num,
						ref: 'ref' + this.num,
						val: ''
					})
				} else {
					layer.alert('最多添加十项');
				}
			},
			done() {
				if(!this.checkNull()) {
					let pro = [];
					this.prjs.forEach((item) => {
						pro.push(item.val);
					})
					socket.emit('done', {
						room:this.$store.state.room,
						data: pro
					});
					this.isdone = true;
					this.$nextTick(() => {
						this.createPie(pro);
						$.post({
							url:main+'/saveGameData',
							dataType:'json',
							data:{
								room:this.$store.state.room,
								start:true,
								data:JSON.stringify(pro)
							}
						})
					})
				}
			},
			checkNull() {
				for(let i = 0; i < this.prjs.length; i++) {
					let item = this.prjs[i];
					if(!item.val.trim()) {
						layer.alert('请完成项目' + (i + 1));
						return true;
					}
				}
				return false;
			},
			createPie(items) {
				//生成转盘
				const colors = ['#FE5CFF', '#1BFFFF', '#FFFD01', '#F7BE33'];
				let can = this.$refs.ctx,
					ctx = can.getContext('2d'),
					starAng = 0, //开始角度
					incNum = 360 / items.length,
					endAng = 0; //结束角度
				can.width = $('.zhuanpan').width();
				can.height = $('.zhuanpan').height();
				ctx.translate(can.width / 2, can.height / 2);
				for(var i = 0; i < items.length; i++) {
					starAng = i * incNum;
					endAng = starAng + incNum;
					ctx.save();
					ctx.beginPath();
					ctx.fillStyle = colors[i % (colors.length)];
					ctx.moveTo(0, 0);
					ctx.arc(0, 0, can.width / 2, starAng * Math.PI / 180, endAng * Math.PI / 180, false);
					ctx.closePath();
					ctx.fill();

				}
				//生成文字
				let _txt = '',
					adeg = 360 / items.length;
				for(var i = 0; i < items.length; i++) {
					this.txts.push({
						deg: 'transform:rotate(' + (adeg * i + (adeg / 2)) + 'deg)',
						txt: items[i]
					})
					_txt += '<p style="transform:rotate(' + (adeg * i + (adeg / 2)) + 'deg)">' + items[i] + '</p>';
				}
			},
			start(){
				//开始抽奖
				if(!this.isLeader){
					layer.alert('您不是房主，不能操作!');
					return;
				}
				socket.emit('start');
				this.play();
				var goal=(Math.random()*this.txts.length) | 0;
				setTimeout(()=>{
					var rs=this.end(goal);
					socket.emit('end',{
						goal:rs.goal,
						num:rs.num
					})
				},2000)
				
			},
			play(){
				//抽奖开始
				this.anim=true;
				
				let len=this.users.length;
				var num=Math.random()*len | 0;
				this.sid=setInterval(()=>{
					num++;
					if(num>len-1){
						num=0;
					}
					this.curindex=num;
				},30)
			},
			end(goal){
				//抽奖结束
				let adeg = 360 / this.txts.length;
				this.anim=false;
				clearInterval(this.sid);
				
				//+90 是因为css旋转和canvas的旋转起始角度不同，相差90度
				let gldeg=90+goal*adeg+adeg/2;
				this.$refs.needle.style.transform='rotate('+gldeg+'deg)';
//				console.log('users',this.users,this.curindex);
				this.msg.user=this.users[this.curindex];
				this.msg.obj=this.txts[goal].txt;
				this.showresult=true;
				this.records.push('恭喜'+this.users[this.curindex]+' 获得'+this.txts[goal].txt);
				return {
					goal:goal,
					num:this.curindex
				}
				
			},
			ok(){
				if(!this.isLeader) return;
				this.showresult=false;
				socket.emit('closealert');
			}
		},
		mounted() {
			var that = this;
			socket.on('userin', function(data) {
				//				console.log(data);
				let users = data.users;
				that.users = users;
			});
			//监听是否房主已经制作好表盘
			socket.on('done', (dt) => {
				this.isdone = true;
//				console.log(dt.data);
				this.$nextTick(()=>{
					this.createPie(dt.data);
					
				})
			})
			socket.on('start',()=>{
				//开始抽奖
				this.play();
			})
			
			socket.on('closealert',()=>{
				//关闭弹窗
				this.showresult=false;
			})
			
			socket.on('end',(dt)=>{
				console.info(11);
				this.curindex=dt.num;
				this.$nextTick(()=>{
					this.end(dt.goal);
				})
			})
			
			$.post({
				url:main+'/getGameData',
				data:{
					room:this.$store.state.room
				},
				success:function(dt){
//					console.log('roomdt',dt);
					if(dt.flag){
						var res=dt.data;
						if(res.start=='true'){
							//如果游戏已经开始
							that.isdone=true;
							var pro=JSON.parse(res.data);
							that.$nextTick(()=>{
								that.createPie(pro);
							})
						}
					}else{
						layer.alert('服务器错误');
					}
				}
			})

		},
		created() {
			this.curroom = this.$route.query.roomid;
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
	@import '../assets/scss/reset';
	.step3 {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		background: #f1f1f1;
		header {
			width: 100%;
			height: 80px/$ppr;
			line-height: 80px/$ppr;
			background: #77c3ec;
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			color: #fff;
			font-size: 32px/$ppr;
			.back {
				display: block;
				width: 40px/$ppr;
				height: 40px/$ppr;
				background: url(../assets/image/back.png);
				background-size: cover;
				position: absolute;
				left: 20px/$ppr;
				@include trant;
			}
		}
		.users {
			width: 95%;
			border-radius: 10px/$ppr;
			background: #fff;
			margin: 100px/$ppr auto 30px/$ppr;
			padding: 30px/$ppr 0;
			p {
				line-height: 50px/$ppr;
				padding-left: 20px/$ppr;
				color: #333;
				font-size: 30px/$ppr;
			}
			ul {
				width: 100%;
				padding: 0 20px/$ppr;
				margin-top: 20px/$ppr;
				&:after {
					content: '';
					display: block;
					clear: both;
				}
				li {
					font-size: 28px/$ppr;
					color: #7367F0;
					float: left;
					margin-right: 30px/$ppr;
					padding: 2px 4px;
					&.cur {
						border: 2px dashed #4300ff;
					}
				}
			}
		}
		.setopts {
			width: 95%;
			margin: 20px/$ppr auto;
			background: #fff;
			border-radius: 10px/$ppr;
			padding: 20px/$ppr;
			box-sizing: border-box;
			p {
				font-size: 32px/$ppr;
				color: #333;
				text-align: left;
				padding-left: 8px/$ppr;
				box-sizing: border-box;
				margin-bottom: 20px/$ppr;
				i {
					font-style: normal;
					font-size: 26px/$ppr;
					color: #999;
				}
			}
			ul {
				li {
					width: 100%;
					height: 60px/$ppr;
					line-height: 60px/$ppr;
					font-size: 32px/$ppr;
					color: #333;
					margin-bottom: 20px/$ppr;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					label {
						width: 20%;
						color: #666;
					}
					input {
						width: 75%;
						height: 100%;
						border: 1px solid #999;
						border-radius: 6px/$ppr;
						padding-left: 10px/$ppr;
						box-sizing: border-box;
						&:focus {
							box-shadow: 0 0 15px 2px #e88dd5;
						}
					}
				}
			}
			.btnarea {
				margin: 50px/$ppr auto 20px/$ppr;
				display: flex;
				justify-content: center;
				.btnadd {
					margin-right: 10px/$ppr;
				}
				.btnadd,
				.btndone {
					width: 200px/$ppr;
					height: 80px/$ppr;
					line-height: 80px/$ppr;
					text-align: center;
					display: block;
					background: #2E8DED;
					color: #fff;
					border: 1px solid #4476A7;
					border-radius: 20px/$ppr;
					font-size: 34px/$ppr;
				}
			}
		}
		.loading {
			width: 95%;
			height: 400px/$ppr;
			margin: 20px/$ppr auto;
			background: #fff;
			border-radius: 10px/$ppr;
			padding: 10px/$ppr;
			box-sizing: border-box;
			background: #fff url(../assets/image/load.gif) no-repeat;
			background-size: 100% 150%;
			p {
				width: 100%;
				font-size: 36px/$ppr;
				color: #333;
			}
		}
		.zhuanpan {
			width: 600px/$ppr;
			height: 600px/$ppr;
			margin: 40px/$ppr auto;
			background: #fff;
			border-radius: 50%;
			border: 30px/$ppr solid #2D93CA;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			.needle {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 150px/$ppr;
				height: 150px/$ppr;
				background: #e296d8;
				border-radius: 50%;
				margin-top: -75px/$ppr;
				margin-left: -75px/$ppr;
				//                  transform-origin: center center;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32px/$ppr;
				z-index: 3;
				em {
					position: absolute;
					top: -186px/$ppr;
					left: 50%;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 100px/$ppr 20px/$ppr;
					border-color: transparent transparent #e296d8;
					transform: translateX(-50%);
				}
			}
			.an_rt {
				animation: keeprotate .2s linear infinite;
			}
			.txt {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 2;
				p {
					text-align: right;
					position: absolute;
					top: 50%;
					left: 50%;
					transform-origin: left center;
					font-size: 34px/$ppr;
					color: #333;
					width: 48%;
					height: 40px/$ppr;
					line-height: 40px/$ppr;
					margin-top: -20px/$ppr;
				}
			}
			.ctx {
				//                  width:100%;
				//                  height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}
		.alert {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80%;
			height: 200px/$ppr;
			background: #ff5722;
			border-radius: 10px/$ppr;
			z-index: 9;
			padding: 20px;
			text-align: center;
			p {
				text-align: center;
				font-size: 32px/$ppr;
				color: #fff;
				width: 100%;
				height: 80px/$ppr;
				margin-bottom: 30px/$ppr;
				span{
					font-size: 34px/$ppr;
					color: #36f94f;
					margin:0 5px/$ppr;
				}
			}
			button {
				padding: 8px/$ppr 15px/$ppr;
				border: 1px solid #aac7d6;
				background: #b9abde;
				border-radius: 10px/$ppr;
				width: 160px/$ppr;
				height: 80px/$ppr;
				line-height: 80px/$ppr;
				text-align: center;
				color: #fff;
			}
		}
		.resultlist{
			width:95%;
			margin: 30px/$ppr auto;
			background: #fff;
			border-radius:10px/$ppr;
			max-height: 300px/$ppr;
			overflow: auto;
			padding: 20px/$ppr;
			box-sizing: border-box;
			ul li{
				font-size: 30px/$ppr;
				color: #888;
				border-bottom:1px solid #eee;
				line-height: 2;
			}
		}
	}
	
	@keyframes keeprotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>